import React, { useState } from 'react';
import './Register.css'
import { useNavigate } from 'react-router-dom';
import {registerApi} from "../../../api/account/register/registerApi.ts";

const Register = () => {
    const [username,setUsername] = useState('')
    const [email,setEmail] = useState('')
    const [password,setPassword] = useState('')
    const [phone,setPhone] = useState('')
    const [nickname,setNickname] = useState('')
    const navigate = useNavigate()

    const handleSubmit = async (e) => {
        e.preventDefault();
        const data = {
            username: username,
            password: password,
            phone: phone,
            email: email,
            nickname: nickname
        }
        if (await registerApi(data)) {
            alert('注册成功！')
            navigate('/login') // 注册成功后跳转到登录页
        } else {
            alert('fail')
        }

    };

    return(
    <div className="register-container">
      <div className="register-box">
        <h1>用户注册</h1>
        <p className="register-subtitle">创建您的账户</p>

        <form className="register-form" onSubmit={handleSubmit}>
            {/* 用户名,是登入账号,不是用户昵称 */}
            <div className="form-group">
                <label htmlFor="username">用户名(不是别人看到您的名字)</label>
                <input
                  type="text"
                  id="username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="请输入用户名"
                  required
                />
            </div>

            {/* 邮箱 */}
            <div className="form-group">
                <label htmlFor="email">电子邮箱</label>
                <input
                  type="email"
                  id="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="请输入邮箱地址"
                  required
                />
            </div>

            {/* 密码 */}
            <div className="form-group">
                <label htmlFor="password">密码</label>
                <input
                  type="password"
                  id="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="请输入密码"
                  minLength={6}
                  required
                />
            </div>

            {/* 手机号 */}
            <div className="form-group">
                <label htmlFor="phone">联系电话</label>
                <input
                  type="tel"
                  id="phone"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  placeholder="请输入手机号码"
                  pattern="[0-9]{11}"
                  required
                />
            </div>

            {/* 用户昵称 */}
            <div className="form-group">
                <label htmlFor="nickname">昵称</label>
                <input
                    type="nickname"
                    id="nickname"
                    value={nickname}
                    onChange={(e) => setNickname(e.target.value)}
                    placeholder="请输入用户昵称"
                    required
                />
            </div>

          <button type="submit" className="register-button">
            立即注册
          </button>
        </form>

        {/* 底部链接 */}
        <div className="register-links">
          <span className="link">已有账号？立即登录</span>
        </div>

        {/* 社交登录 */}
        <div className="social-login">
          <button className="social-button wechat">
            <span>微信登录</span>
          </button>
          <button className="social-button qq">
            <span>QQ登录</span>
          </button>
          <button className="social-button weibo">
            <span>微博登录</span>
          </button>
        </div>
      </div>
    </div>
  )
}

export default Register;